<template>

	<wd-tabs v-model="tab" sticky @change="handleTabChange" auto-line-width>
		<block v-for="item in tabs" :key="item">
			<wd-tab :title="`${item}`" :name="item">
				<custom-layout custom-class="custom-layout">
					<view class="clue" v-if="tab==='我的线索'">

						<!-- 线索列表 -->
						<view v-if="clueList.length" class="clueList">
							<!-- 卡片 -->
							<wd-card v-for="_ in clueList" :key="_.id" custom-class="card">
								<view class="tags" :class="_.status==3?'tags-gray':''">
									{{dictionaryStore.analysis('clue_status',_.status)}}
								</view>
								<view class="top-detail" @click="handleViewDetail(_)">
									查看详情
								</view>
								<template #title>
									<view class="title top-title">
										<view class="name">
											<view class="flex">
												<view class="dot" :class="_.status==3?'dot-gray':''">
													
												</view>
												<view class="name-info">
													{{_.name}}
												</view>
												<view class="phone" :class="_.status==3?'phone-gray':''">
													<image v-if="_.status==3" src="/static/image/clue/phone-gray.png" mode="aspectFit"></image>
													<image v-else src="/static/image/clue/phone.png" mode="aspectFit"></image>
													{{_.phone}}
												</view>
											</view>
											<view class="detail">
												{{`${dictionaryStore.analysis('system_user_sex',_.sex)}  微信号:${_.wxCode}`}}
											</view>
										</view>
										<view v-if="_.phone" @click="handleCallPhone(_.phone)">
											<image v-if="_.status==3" src="/static/image/clue/call-gray.png" mode="aspectFit" class="phone-img"></image>
											<image v-else src="/static/image/clue/call.png" mode="aspectFit" class="phone-img"></image>
										</view>
									</view>
								</template>
								<view class="card-item">
									<view class="title">装修类别</view>
									<view class="content">
										{{dictionaryStore.analysis('decoration_order_type',_.decorationType)}}</view>
								</view>
					
								<view class="card-item">
									<view class="title">楼盘名称</view>
									<view class="content">{{propertyList.find(item=>item.id===_.propertyName)?.name}}
									</view>
								</view>
								<view class="card-item">
									<view class="title">详细地址</view>
									<view class="content">{{_.address}}</view>
								</view>
								<view class="card-item">
									<view class="title">房屋面积</view>
									<view class="content">{{_.houseArea}}</view>
								</view>
								<!-- <template #footer>
									<view class="footer">
										<wd-button v-if="_.wxCode" size="small" plain custom-class="button"
											@click="handleCopyWxCode(_.wxCode)">复制微信</wd-button>
										<wd-button v-if="_.phone" size="small" plain custom-class="button"
											@click="handleCallPhone(_.phone)">拨打电话</wd-button>
									</view>
								</template> -->
							</wd-card>
							<!-- 加载更多 -->
							<wd-loadmore :state="pagination.loadmoreState" @reload="handleGetCluePage" />
						</view>
						<!-- 空 -->
						<wd-status-tip v-else image="search" tip="暂无线索" />
						<!-- 新建按钮 -->
						<wd-fab draggable :expandable="false">
							<template #trigger>
								<wd-button icon="add" @click="handleCreate">新建线索</wd-button>
							</template>
						</wd-fab>

					</view>

					<!-- 我的推荐人 -->
					<view class="referee" v-if="tab==='我的推荐人'">
						<!-- 推荐人列表 -->
						<view v-if="refereeList.length" class="refereeList">
							<!-- 卡片 -->
							<wd-card v-for="_ in refereeList" :key="_.id" custom-class="referee-card">
								
								<view class="referee-content">
									<view class="left">
										<!-- 头像 -->
										<image class="avatar" :src="_.avatar" mode="aspectFill" />
										<!-- 名字电话 -->
										<view class="name">
											<view class="name-info">
												{{_.nickname}}
											</view>
											<view class="phone">
												<image src="/static/image/clue/phone.png" mode="aspectFit"></image>
												{{_.mobile}}
											</view>
										</view>
									</view>
									<!-- 查看收益 -->
									<view class="right">
										<view class="view">
											<text>查看收益</text>
											<wd-icon name="arrow-right" color="#6a9cff"></wd-icon>
										</view>
										<view class="time">
											<view class="">
												注册时间
											</view>
											<view class="">
												{{_.createTime&&dayjs(_.createTime).format('YYYY-MM-DD HH:mm:ss')}}
											</view>
										</view>
									</view>
								</view>
								
							</wd-card>
							<!-- 加载更多 -->
							<wd-loadmore :state="pagination.loadmoreState" @reload="handleGetRefereePage" />
						</view>
						<!-- 空 -->
						<wd-status-tip v-else image="search" tip="暂无推荐人" />
						
					</view>
				</custom-layout>
			</wd-tab>
		</block>
	</wd-tabs>

</template>

<script setup>
	import {
		reactive,
		ref,
		watch
	} from 'vue'
	import {
		onPullDownRefresh,
		onReachBottom,
		onTabItemTap
	} from '@dcloudio/uni-app'
	import {
		getCluePage,
		getPropertyList,
		getRefereePage
	} from '@/api/clue/index.js'
	import {
		useDictionaryStore,
		useUserStore
	} from '@/store/index.js'
	import dayjs from 'dayjs'

	// 字典仓库
	const dictionaryStore = useDictionaryStore()
	// 用户仓库
	const userStore = useUserStore()
	// tabs切换
	const tabs = ref(['我的线索', '我的推荐人'])
	const tab = ref('我的线索')
	// 楼盘列表
	const propertyList = ref([])
	// 获取楼盘列表
	const handleGetPropertyList = () => {
		const params = {
			pageSize: -1
		}
		getPropertyList(params).then((data) => {
			propertyList.value = data.list
		}).catch((error) => {
			uni.showToast({
				title: error,
				icon: 'error'
			})
		})
	}
	handleGetPropertyList()
	// 分页
	const pagination = reactive({
		pageNo: 1,
		pageSize: 10,
		total: 0,
		loadmoreState: 'loading'
	})
	// 线索列表
	const clueList = ref([])
	// 处理获取线索分页
	const handleGetCluePage = () => {
		pagination.loadmoreState = 'loading'
		const params = {
			wxUserId: userStore.userId,
			pageNo: pagination.pageNo,
			pageSize: pagination.pageSize
		}
		getCluePage(params).then((data) => {
			clueList.value.push(...data.list)
			pagination.total = data.total
			pagination.pageNo++
			if (clueList.value.length >= pagination.total) pagination.loadmoreState = 'finished'
		}).catch((error) => {
			uni.showToast({
				title: error,
				icon: 'error'
			})
			pagination.loadmoreState = 'error'
		}).finally(() => {
			uni.stopPullDownRefresh()
		})
	}
	// 监听用户id
	watch(() => userStore.userId, () => {
		if (userStore.userId && !clueList.value.length) handleGetCluePage()
	}, {
		immediate: true
	})
	// 下拉刷新
	onPullDownRefresh(() => {
		pagination.pageNo = 1
		pagination.total = 0
		clueList.value = []
		handleGetCluePage()
	})
	// 触底刷新
	onReachBottom(() => {
		if (clueList.value.length < pagination.total) handleGetCluePage()
	})
	// 处理新建
	const handleCreate = () => {
		uni.navigateTo({
			url: '/pages/clue/create/index'
		})
	}
	// 处理新建
	const handleViewDetail = (item) => {
		uni.navigateTo({
			url: '/pages/clue/detail/index?item='+encodeURIComponent(JSON.stringify(item))
		})
	}
	// 监听刷新线索列表
	uni.$on('refresh-clue-list', () => {
		uni.startPullDownRefresh()
	})
	// 处理复制微信号码
	const handleCopyWxCode = (data) => {
		uni.setClipboardData({
			data
		})
	}
	// 处理拨打电话
	const handleCallPhone = (phoneNumber) => {
		uni.makePhoneCall({
			phoneNumber
		})
	}
	// 推荐人列表
	const refereeList = ref([])
	// 处理获取推荐人
	const handleGetRefereePage = () => {
		const params = {
			wxUserId: userStore.userId,
			
		}
		getRefereePage(params).then((data) => {
			refereeList.value=data
		}).catch((error) => {
			uni.showToast({
				title: error,
				icon: 'error'
			})
		})
	}
	// 点击到线索判断是否登录
	onTabItemTap(async (e) => {
		if (e.pagePath === 'pages/clue/index/index') {
			if (!userStore.userId) {
				const res = await userStore.wxLogin()
				if (res.nickname) {
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 1000)


				} else {
					uni.reLaunch({
						url: '/pages/login/index'
					})
				}
			}
		}
	})
	// tab切换调用接口
	const handleTabChange = (e) => {
		if(e.name=="我的线索") {
			handleGetCluePage()
		} else {
			handleGetRefereePage()
		}
	}
</script>

<style lang="scss" scoped>
	// 自定义布局
	:deep(.custom-layout) {
		background: #F8F8F8;
		min-height: calc(100vh - 46px) !important;
	}

	// 线索列表
	.clueList {
		margin-top: 10rpx;
		:deep(.card) {

			position: relative;
			.tags {
				position: absolute;
				left: 2rpx;
				top: 2rpx;
				color: #ffffff;
				padding: 2rpx 18rpx;
				font-size: 22rpx;
				background-color: #6a9cff;
				border-top-left-radius: 18rpx;
				border-bottom-right-radius: 18rpx;
			}
			.tags-gray {
				background-color: #bfbfbf;
			}
			.top-detail {
				color: #6a9cff;
				font-size: 22rpx;
				position: absolute;
				right: 28rpx;
				top: 16rpx;
				
				
			}
		}
		.detail {
			font-size: 24rpx;
			color: #989898;
			font-weight: normal;
			margin-top: 10rpx;
		}
		.card-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			color: #333333;
			margin: 10rpx 0;
		}
		.top-title {
			margin-top: 30rpx;
			color: #333333 !important;
			
		}

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #989898;

			.name {
				font-size: 34rpx;
				font-weight: bold;
				.flex {
					display: flex;
					.dot {
						width: 8rpx;
						height: 26rpx;
						display: flex;
						align-self: center;
						background-color: #6a9cff;
					}
					.dot-gray {
						background-color: #bfbfbf;
					}
					.name-info {
						margin: 0 16rpx;
					}
					
				}
			}

			:deep(.tag) {
				font-size: 24rpx;
				padding: 6rpx 10rpx;
			}
		}

		.footer {
			:deep(.button) {
				margin: 0 6rpx;
			}
		}
		:deep(.wd-card__footer) {
			padding-bottom: 4px;
		}
		.phone-img {
			width: 60rpx;
			height: 60rpx;
		}
	}
	.phone {
		background-color: #6a9cff;
		border-radius: 18rpx;
		color: white;
		font-size: 24rpx;
		font-weight: normal;
		padding: 0 12rpx;
		display: flex;
		align-items: center;
		image {
			width: 25rpx;
			height: 25rpx;
		}
	}
	.phone-gray {
		background-color: #f4f5f7;
	}
	.refereeList {
		margin-top: 10rpx;
		:deep(.wd-card__footer) {
				padding-bottom: 4px;
		}
		:deep(.wd-card__title-content) {
				padding: 4px 0;
		}
		:deep(.referee-card) {
			
			.referee-content {
				display: flex;
				justify-content: space-between;
				.left {
					display: flex;
					.avatar {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
					.name {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
					}
					.name-info {
						color: #333;
						font-weight: bold;
						font-size: 34rpx;
					}
					.phone {
						font-size: 28rpx;
					}
				}
				.right {
					text-align: right;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.view {
						font-size: 24rpx;
						color: #6a9cff;
					}
					.time {
						font-size: 20rpx;
					}
				}
				
			}
			
		}
	}
</style>